<template>
  <div>
    <p class="title">{{$t('RIGHTS.MYRIGHTS')}}</p>
    <div class="my_benefits pcShow" v-if="!isPhone">
        <div class="my_benefits_item">
          <p>{{$t('RIGHTS.MEMBERRIGHTS')}}</p>
          <div class="my_benefits_item_content">
            <div :class="{'disabled': !item.active}" v-for="item in memberBenafits" :key="item.label">
              <div class="my_benefits_left">
                <svg class="svg_icon" v-show="item.active">
                  <use :xlink:href="'#' +item.icon_normal"></use>
                </svg>
                <svg class="svg_icon" v-show="!item.active">
                  <use :xlink:href="'#' +item.icon_hover"></use>
                </svg>
                <p>{{item.label}}</p>
              </div>
              <div class="my_benefits_right">
                <svg class="svg_yes" v-show="item.active">
                  <use xlink:href="#icon-yes_normal"></use>
                </svg>
                <svg class="svg_no" v-show="!item.active">
                  <use xlink:href="#icon-no_normal"></use>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div class="my_benefits_item">
        
          <p>{{$t('RIGHTS.WARRANTYRIGHTS')}}</p>
          <div class="my_benefits_item_content">
            <div   :class="{'disabled': !item.active}" v-for="item in warrantyBenefits" :key="item.label">
              <div class="my_benefits_left">
                <svg class="svg_icon" v-show="item.active">
                  <use :xlink:href="'#' +item.icon_normal"></use>
                </svg>
                <svg class="svg_icon" v-show="!item.active">
                  <use :xlink:href="'#' +item.icon_hover"></use>
                </svg><p>{{$t(item.label)}}</p>
              </div>
              <div class="my_benefits_right">
                <svg class="svg_yes" v-show="item.active">
                  <use xlink:href="#icon-yes_normal"></use>
                </svg>
                <svg class="svg_no" v-show="!item.active">
                  <use xlink:href="#icon-no_normal"></use>
                </svg>
              </div>
            </div>
          </div>
          <div class="my_benefits_button" v-if="warranty_status == 0 && isRequest">
            <p>{{$t('RIGHTS.WARRANTYGUIDE')}}</p>
            <router-link to="/warranty"><el-button>{{$t('DEFAULT.LIFETIMEWARRANTY')}}</el-button></router-link>
          </div> 
          <!-- <div class="my_benefits_button" v-else-if="warranty_status == 1">
            <p>{{$t('RIGHTS.HASWARRANTY')}}</p>
            <a href="/my_devices"> <el-button>My device</el-button></a>
          </div> -->
          <div class="my_benefits_button" v-else-if="warranty_status == 2 && isRequest">
            <p>{{$t('RIGHTS.NOWARRANTY')}}</p> 
            <router-link to="/warranty_active"><el-button>{{$t('DEVICE.SUBSCRIBEEMAIL')}}</el-button> </router-link>
          </div>
        </div>
        <div class="my_benefits_item">
          <p>{{$t('RIGHTS.BETATESTERRIGHTS')}}</p>
          <div class="my_benefits_item_content">
            <div  :class="{'disabled': !item.active}"  v-for="item in betaTesterBenefits" :key="item.label">
              <div class="my_benefits_left">
                <svg class="svg_icon" v-show="item.active">
                  <use :xlink:href="'#' +item.icon_normal"></use>
                </svg>
                <svg class="svg_icon" v-show="!item.active">
                  <use :xlink:href="'#' +item.icon_hover"></use>
                </svg>
                <p >{{$t(item.label)}}</p>
              </div>
              <div class="my_benefits_right">
                <svg class="svg_yes" v-show="item.active">
                  <use xlink:href="#icon-yes_normal"></use>
                </svg>
                <svg class="svg_no" v-show="!item.active">
                  <use xlink:href="#icon-no_normal"></use>
                </svg>
              </div>
            </div>
          </div>
          <div class="my_benefits_button" v-if="beta_tester_status ==0 && isRequest">
            <p>{{$t('RIGHTS.BETATESTERGUIDE')}}</p>
            <a href="/betatester"><el-button>{{$t('DEFAULT.BETATESTER')}}</el-button> </a>
          </div>


        </div>
    </div>
     <div class="my_benefits phoneShow" v-else>
         <swiper :options="swiperOption" class="swiperRights" ref="mySwiper" >
          <swiper-slide class="my_benefits_item">
            <div class="my_benefits_item_title">
              <el-image :src=" imgRightsNormal " ></el-image>
              <p >{{$t('RIGHTS.MEMBERRIGHTS')}}</p>
            </div>
        
          </swiper-slide>
          <swiper-slide class="my_benefits_item">
           <div class="my_benefits_item_title">
              <el-image :src=" imgRightsNormal " v-if="warranty_status ==1"></el-image>
              <el-image :src=" imgRightsNon " v-else></el-image>
              <p>{{$t('RIGHTS.WARRANTYRIGHTS')}}</p>
            </div>
          </swiper-slide>
          <swiper-slide class="my_benefits_item">
            <div class="my_benefits_item_title">
              <el-image :src=" imgRightsNormal " v-if="beta_tester_status !=0"></el-image>
              <el-image :src=" imgRightsNon " v-else></el-image>
              <p>{{$t('RIGHTS.BETATESTERRIGHTS')}}</p>
            </div>
          </swiper-slide>
   
        </swiper>
        <swiper :options="swiperWordOption" class="swiperWord" ref="swiperWord" >
          <swiper-slide class="user_rights basic " >
            <div class="my_benefits_item_content">
              <div :class="{'disabled': !item.active}" v-for="item in memberBenafits" :key="item.label">
                <div class="my_benefits_left">
                  <svg class="svg_icon" v-show="item.active">
                    <use :xlink:href="'#' +item.icon_normal"></use>
                  </svg>
                  <svg class="svg_icon" v-show="!item.active">
                    <use :xlink:href="'#' +item.icon_hover"></use>
                  </svg>
                  <p>{{item.label}}</p>
                </div>
                <div class="my_benefits_right">
                  <svg class="svg_yes" v-show="item.active">
                    <use xlink:href="#icon-yes_normal"></use>
                  </svg>
                  <svg class="svg_no" v-show="!item.active">
                    <use xlink:href="#icon-no_normal"></use>
                  </svg>
                </div>
              </div>
               <div >
                <div class="my_benefits_left">
                  <svg class="svg_icon" >
                    <use :xlink:href="'#'"></use>
                  </svg>
                  <svg class="svg_icon" >
                    <use :xlink:href="'#' "></use>
                  </svg>
                  <p></p>
                </div>
                <div class="my_benefits_right">
                </div>
              </div>
              <div >
                <div class="my_benefits_left">
                  <svg class="svg_icon" >
                    <use :xlink:href="'#'"></use>
                  </svg>
                  <svg class="svg_icon" >
                    <use :xlink:href="'#' "></use>
                  </svg>
                  <p></p>
                </div>
                <div class="my_benefits_right">
                 
                </div>
              </div>
            </div>
            <div class="my_benefits_button" v-if="(beta_tester_status ==0  || warranty_status == 0 || warranty_status == 2) && isRequest">
              <p style="opacity:0">{{$t('RIGHTS.WARRANTYGUIDE')}}</p>
              <a><el-button style="opacity:0">{{$t('DEFAULT.LIFETIMEWARRANTY')}}</el-button></a>

            </div> 
          </swiper-slide>
          <swiper-slide class="user_rights warranty" >
            <div class="my_benefits_item_content">
              <div   :class="{'disabled': !item.active}" v-for="item in warrantyBenefits" :key="item.label">
                <div class="my_benefits_left">
                  <svg class="svg_icon" v-show="item.active">
                    <use :xlink:href="'#' +item.icon_normal"></use>
                  </svg>
                  <svg class="svg_icon" v-show="!item.active">
                    <use :xlink:href="'#' +item.icon_hover"></use>
                  </svg><p>{{$t(item.label)}}</p>
                </div>
                <div class="my_benefits_right">
                  <svg class="svg_yes" v-show="item.active">
                    <use xlink:href="#icon-yes_normal"></use>
                  </svg>
                  <svg class="svg_no" v-show="!item.active">
                    <use xlink:href="#icon-no_normal"></use>
                  </svg>
                </div>
              </div>
            </div>
          <div class="my_benefits_button" v-if="warranty_status == 0 && isRequest">
            <p>{{$t('RIGHTS.WARRANTYGUIDE')}}</p>
            <router-link to="/warranty"><el-button>{{$t('DEFAULT.LIFETIMEWARRANTY')}}</el-button></router-link>
          </div> 
          <!-- <div class="my_benefits_button" v-else-if="warranty_status == 1">
            <p>{{$t('RIGHTS.HASWARRANTY')}}</p>
            <a href="/my_devices"> <el-button>My device</el-button></a>
          </div> -->
          <div class="my_benefits_button" v-else-if="warranty_status == 2 && isRequest">
            <p>{{$t('RIGHTS.NOWARRANTY')}}</p> 
            <router-link to="/warranty_active"><el-button>{{$t('DEVICE.SUBSCRIBEEMAIL')}}</el-button> </router-link>
          </div>
          </swiper-slide>

          <swiper-slide class="user_rights betatester">
            <div class="my_benefits_item_content">
              <div  :class="{'disabled': !item.active}"  v-for="item in betaTesterBenefits" :key="item.label">
                <div class="my_benefits_left">
                  <svg class="svg_icon" v-show="item.active">
                    <use :xlink:href="'#' +item.icon_normal"></use>
                  </svg>
                  <svg class="svg_icon" v-show="!item.active">
                    <use :xlink:href="'#' +item.icon_hover"></use>
                  </svg>
                  <p >{{$t(item.label)}}</p>
                </div>
                <div class="my_benefits_right">
                  <svg class="svg_yes" v-show="item.active">
                    <use xlink:href="#icon-yes_normal"></use>
                  </svg>
                  <svg class="svg_no" v-show="!item.active">
                    <use xlink:href="#icon-no_normal"></use>
                  </svg>
                </div>
              </div>
            </div>
            <div class="my_benefits_button" v-if="beta_tester_status ==0 && isRequest">
              <p>{{$t('RIGHTS.BETATESTERGUIDE')}}</p>
              <a href="/betatester"><el-button>{{$t('DEFAULT.BETATESTER')}}</el-button> </a>
            </div>
          </swiper-slide>
        </swiper>
     </div>
  </div>
 
</template>

<script>
import { myBenefits } from '@/api/common/personal.js'
import { mapGetters } from 'vuex'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
let vm = null
export default {
  
  data() {
    return{
      isRequest:false,
      memberBenafits: [
        {label: 'Leave a comment and get your voice heard', icon_normal: 'icon-comment_normal', icon_hover: 'icon-comment_without', active: true}
      ],
      warrantyBenefits: [
        {label: 'WARRANTYGUIDE.BETATESTERONE', icon_normal: 'icon-lifetime_normal', icon_hover: 'icon-lifetime_without', active: false},
        {label: 'WARRANTYGUIDE.BETATESTERTWO', icon_normal: 'icon-replacement_normal', icon_hover: 'icon-replacement_without', active: false},
        {label: 'WARRANTYGUIDE.BETATESTERTHREE', icon_normal: 'icon-discounts_normal', icon_hover: 'icon-discounts_without', active: false}
      ],
      betaTesterBenefits: [
        // {label: 'Exclusive huge discounts on up-coming new products,free units, and other loyalty rewards.', icon_normal: 'icon-reward_normal', icon_hover: 'icon-reward_without', active: false},
        {label: 'RIGHTS.BETATESTER1', icon_normal: 'icon-reward_normal', icon_hover: 'icon-reward_without', active: false},
        {label: 'RIGHTS.BETATESTER2', icon_normal: 'icon-Freeunits_normal ', icon_hover: 'icon-Freeunits_without', active: false},
        {label: 'RIGHTS.BETATESTER3', icon_normal: 'icon-Loyaltyrewards_normal', icon_hover: 'icon-Loyaltyrewards_without', active: false},
      
      ],
      warranty_status: 0,
      beta_tester_status: 1,
      swiperOption: {
        loop: false,//是否循环
        slidesPerView: 1.11,//一排显示几个
        spaceBetween: 12, //间隔
        centeredSlides: true,
        on: {
          slideChangeTransitionEnd() { 
            vm.activeIndex = this.activeIndex
            vm.$refs.swiperWord.$swiper.slideTo(this.activeIndex, 200, false);    
          }
        }
      },
      swiperWordOption: {
        loop: false,//是否循环
        slidesPerView: 1,//一排显示几个
          on: {
          slideChangeTransitionEnd() { 
            vm.activeIndex = this.activeIndex
            vm.$refs.mySwiper.$swiper.slideTo(this.activeIndex, 200, false);    
          }
        }
      },
      activeIndex: 0,
      imgRightsNon: require("@/assets/myRights/myRightsNon.svg"),
      imgRightsNormal: require("@/assets/myRights/myRightsNormal.svg")
    }
  },
  components: { Swiper, SwiperSlide },
  created (){
    vm = this
  },
  computed: { 
    ...mapGetters([ 'userInfo', 'isPhone']),
  },
  watch: {
    userInfo:function(){
      if(this.userInfo.email){
      this.getMyBenefits()
    }
    }
  },
  mounted() {
    if(this.userInfo.email){
      this.getMyBenefits()
    }
  },
  methods: {
    getSwiperIndex() {
      this.$nextTick(()=>{
        this.activeIndex = this.$refs.mySwiper.$swiper.activeIndex
      })
    },
  
    getMyBenefits(){
      let params = {
        email: this.userInfo.email
      }
      myBenefits(params).then(res=>{
        let data = res.data;
        let w_status  = data.w_status
        let b_status = data.b_status

        for(let i = 0; i< this.warrantyBenefits.length; i++ ){
          if(w_status == 0){
            this.warrantyBenefits[i].active = false
          } else if(w_status == 2 && i == 2){
            this.warrantyBenefits[i].active = false
          } else {
            this.warrantyBenefits[i].active = true
          }
        }
        for(let j = 0; j < this.betaTesterBenefits.length; j++ ){
          if(b_status != 0 ){
            this.betaTesterBenefits[j].active = true
          }else {
            this.betaTesterBenefits[j].active = false
          }
        }
        this.warranty_status = w_status
        this.beta_tester_status = b_status
        this.isRequest = true
      })
    }
  }

}
</script>

<style>

</style>